<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>去保养-有人情味的保养</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="汽车保养,汽车配件,汽车维修,养车无忧,养车,4S店品质,氦修驿站,丰田保养" />
    <meta name="description" content="100%正品配件,4S店一半价格,先行赔付,闪电送达!线上购买配件,线下提供安装.上万用户的最佳选择!去掉中间环节,直接从源头采购配件!" />
    <link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/css/base.css">
    <link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/mobile/css/master.css">
    <style>
    #live .loading{ position:absolute;top:0px;left:0px;text-align:center;line-height:100px;width:100%;display:none;z-index:1;color:#fff;height:100%;background:#000;font-size:14px;}
    </style>
</head>

<body style="height:auto;">
    <eq name="_SESSION['Server']" value="wx">
        <header>
            <a href="tel:4006730088" class="tel iconfont">&#xe60c;</a>
            <a href="javascript:void(0)" class="menu iconfont" onclick="home.showMenu()">&#xe602;</a>
            <img src="{:C('WEB_URL')}Public/mobile/images/logo.png" id="logo">
        </header>
    <else />
        <header class="tcenter fs14">
            <a href="tel:4006730088" class="tel iconfont">&#xe610;</a>
            <a href="javascript:window.history.go(-1)" class="iconfont fleft">&#xe612;</a>
            我的保养直播
        </header>
    </eq>
    <include file="Public/mobileHome" />
    <div class="main" id="live">
        <neq name="order['is_server']" value="0">
            <div class="videoMain">
                <video src="{$order['order']['video1']}" controls="controls" webkit-playsinline preload="auto" id="video"></video>
                <img src="{:C('WEB_URL')}Public/mobile/images/liveLogo.png" style="position:absolute;top:12px;left:10px;width:70px">
                <div class="loading">
                    <p>正在加载中，请稍候...</p>
                </div>
            </div>
            <div class="btnLive">
                <a href="javascript:void(0)" id="J_btnVideo1" class="current" data-src="{$order['order']['video1']}" onclick="live.chooseVideo(this)"><i>&#xe61b;</i>直播视频一</a>
                <a href="javascript:void(0)" data-src="{$order['order']['video2']}" onclick="live.chooseVideo(this)"><i>&#xe61b;</i>直播视频二</a>
            </div>
            <style>
                
                #live .jiyou{ border-left:3px solid #E9E9E9;height:60px;}
                #live .jiyou img{ float:left;width:45px;margin-left:2px;}
                #live .jiyou p{ margin-left:54px;line-height:20px;font-size:12px;}
                #live .jiyou em{ float:none;color:#C21616;font-size:14px;margin-right:10px;}
                #live .jiyou span{ text-decoration:line-through;color:#999;}
                #live .jiyou .count{ float: right;  font-size:24px;  color: #f60;  margin-right: 10px;  margin-left: 5px;  margin-top: 10px;}
                .pay{ -webkit-transition: all 0.3s ease-out;bottom:-56px;}
            </style>
            <div class="itemList">
                <ul>
                    <li id="J_actId0_0_2yj" class=""><i>&#xe61d;</i>所选机油<em>正在获取</em></li>
                </ul>
                <p id="J_loadLog" style="padding:12px 6px 6px 6px;" class="fs14 tcenter">保养过程即将呈现...</p>
                <p style="padding:10px;" class="fs14 fc-999">
                欢迎观看您的爱车保养视频直播。我们将为您永久保存本次保养检测报告，您可随时在<a href="{:C('WEB_URL')}mobile/myOrderInfoQBY/id/{$order['is_server']}">订单详情</a>中查看。</p>
            </div>
            <div class="pay">
                <div class="index">
                    <p id="J_price" class="price"><span class="mPrice"></span><em></em></p>
                </div>
                <a href="/mobile/myOrderInfoQBY?id={$order['is_server']}" >立即支付</a>
            </div>
        <else />
            <div class="videoMain">
                <video src="http://vshare.ys7.com/hcnp/502682816_1_2_1_0_183.136.184.7_6500.m3u8?04d57edd-7e18-4bfa-94df-fabe80bf9fc9" controls="controls" webkit-playsinline preload="auto" id="video"></video>
                <img src="{:C('WEB_URL')}Public/mobile/images/liveLogo.png" style="position:absolute;top:12px;left:10px;width:70px">
                <div class="loading">
                    <p>正在加载中，请稍候...</p>
                </div>
            </div>
            
            <empty name="_SESSION['user']">
                <style>
                    #login{padding-top:0px;}
                    #login h3{font-weight:500;height:42px;line-height:42px;background:#f0f0f0;padding:0 20px;border-bottom:1px solid #ddd;font-size:16px;}
                    #login ul{padding-top:0px;}
                </style>
                <div id="login">
                    <h3>登录观看爱车检测全过程</h3>
                    <ul>
                        <li>
                            <input type="tel" name="phone" placeholder="请输入您的手机号" />
                        </li>
                        <li>
                            <input type="password" name="code" placeholder="6位短信验证码" />
                            <a href="javascript:void(0)" class="getCode" id="J_getCode">获取验证码</a>
                        </li>
                    </ul>
                    <a href="javascript:void(0)" class="iconfont" id="btnSubmit">提交</a>
                </div>
                <script>
                    ;
                    (function(){
                        $("#J_getCode").on("click",function(){
                            var _t = $(this);
                            if (_t.hasClass("getCodeGray")) {
                                return false;
                            }
                            var phone=$("input[name='phone']").val();
                            if(!/^(13|15|18|14|17)[0-9]{9}$/.test(phone)){
                                showMsgTip("您的手机号有误");
                                return false;
                            }
                            _t.addClass("getCodeGray");
                            $.ajax({
                                url:"{:C('WEB_URL')}mobile/getCode.html",
                                type:"POST",
                                data:{"username":phone},
                                datType:"JSON",
                                success:function(res){
                                    if(res.status==1){
                                        setCookie("codeMin",60);
                                        countDown(_t);
                                    }else{
                                        _t.removeClass("getCodeGray");
                                        alert(res['info']);
                                    }
                                }
                            })
                        })

                        $("#btnSubmit").on("click",function(){
                            var _t = $(this);
                            var phone=$("input[name='phone']").val(),
                                code=$("input[name='code']").val().replace(/\D/g,"");
                            if(!/^(13|15|18|14|17)[0-9]{9}$/.test(phone)){
                                showMsgTip("您的手机号有误");
                                return false;
                            }else if(code.length!=6){
                                showMsgTip("短信验证码有误");
                                return false;
                            }

                            $.ajax({
                                url:"{:C('WEB_URL')}mobile/valCode.html",
                                type:"POST",
                                data:{"phone":phone,"code":code},
                                datType:"JSON",
                                success:function(res){
                                    if(res.status==1){
                                        window.location.href="{:C('WEB_URL')}mobile/live/";
                                    }else{
                                        showMsgTip(res.info);
                                        return false;
                                    }
                                }
                            })
                        })

                        getCodeStatus();
                        function getCodeStatus(){
                            var min=getCookie("codeMin");
                            if(min>0){
                                $("#J_getCode").addClass("getCodeGray");
                                countDown($("#J_getCode"));
                            }
                        }

                        //验证码倒计时
                        function countDown(_t) {
                            min=getCookie("codeMin")*1-1;
                            if (min == 0) {
                                _t.html("获取验证码");
                                _t.removeClass("getCodeGray");
                            } else {
                                _t.html(min+"秒后重新获取");
                                setCookie("codeMin",min--);
                                setTimeout(function() {
                                    countDown(_t);
                                },1000)
                            }
                        }

                        $("#msgTip").on("click",function(){
                            $("#msgTip").hide();
                        })
                    })()
                </script>

            <else />
                <div class="error">
                    <i>&#xe619;</i>
                    <p class="p1">您当前没有正在进行中的保养</p>
                    <p class="p2"><a href="/">立即下单</a>,体验一次互联网式的保养</p>
                </div>
            </empty>
        </neq>
    </div>



    
    <div id="signature">
        <h4><span></span>预检结束，请确认签字</h4>
        <div id="canvasDiv"></div>
        <div class="signatureBtn">
            <button id="J_clear">清除</button>
            <button id="J_submit" class="btnOrange">确定</button>
        </div>
        <input type="hidden" id="J_signature" />
    </div>
    
    <php> if($_SESSION['user']['username']=="13575763320"){</php>
        <script type="text/javascript" src="{:C('WEB_URL')}Public/mobile/js/detectionList1.js"></script>
    <php> }elseif($_SESSION['user']['username']=="13735825566"){</php>
        <script type="text/javascript" src="{:C('WEB_URL')}Public/mobile/js/detectionList2.js"></script>
    <php> }else{</php>
        <script type="text/javascript" src="{:C('WEB_URL')}Public/mobile/js/detectionList.js"></script>
    <php> }</php>

    
    <script>

        var live={
            detectionList:detectionList,
            order_id:"{$order['is_server']}",
            video:document.getElementById("video"),
            logId:0,    //当前最新操作记录ID
            initStatus:false,
            logList:$(".itemList > ul"),
            init:function(){
                var _t=this;
                var W=$("body").width();
                $("#video").css("height",W/16*10);

                if(_t.order_id!=0){
                    _t.getItem();
                }
                this.signature();
                //加载中
                _t.video.onwaiting=function(){
                    $("#live .loading").show();
                }

                //开始播放
                _t.video.onplaying=function(){
                    $("#live .loading").hide();
                }

                //加载失败
                _t.video.onerror=function(){
                    $("#live .loading").hide();
                }
            },
            chooseVideo:function(t){
                var t=$(t),
                    src=t.attr("data-src");
                $("#video").attr("src",src);
                t.addClass("current").siblings().removeClass("current");
                this.video.play();
            },
            getItem:function(){
                var _t=this;
                $.ajax({
                    type:"get",
                    dataType:"json",
                    url:"{:C('WEB_URL')}JsApi/getLog.html",
                    data:{"order_id":this.order_id,"log_id":this.logId},
                    success:function(res){
                        if(res.status==1||res.status==0){
                            if(res.status==1){
                                _t.printItem(res.data);
                            }
                            setTimeout(function(){
                                _t.getItem();
                            },2000);
                        }else{
                            showMsgTip(res.info);
                            return false;
                        }
                    }
                })
            },
            
            //数据输出
            printItem:function(data){
                var html='',
                    len=data.length,
                    i=0;

                this.logId=data[len-1]['log_id'];   //当前最新记录ID

                for(;i<len;i++){
                    html=this.getVal(data[i]);
                    this.logList.prepend(html);
                }

                if(!this.initStatus){
                    this.initStatus=true;
                }
            },

            //根据操作ID与值，返回结果
            getVal:function(data){

                var action_id=data['action_id'].replace(/\{:C('WEB_URL')}Public/business/g,"_")+data['type'],
                    li=$("#J_actId"+action_id),
                    className=this.initStatus?"zoomIn animated":"",
                    value="",
                    em=li.find("em"),
                    html="";

                if(action_id=="0_1yj"){

                    if(data['image']!="0"){
                        audio="<audio controls='controls'>"+
                                "<source src='"+data['image'][0]+"' type='audio/mpeg'>"+
                            "</audio>";
                        em.replaceWith(audio);

                    }else{
                        value="无";
                    }
                    
                    
                }else if(action_id=="0_2yj"){
                    this.jiyouId=data['val'];
                    this.printPriceItem(data['val'],"init");

                }else if(action_id=="0_3yj"){
                    em.addClass("fcBlue");
                    value=data['val'];

                    this.printPriceItem(this.jiyouId);

                }else if(action_id=="2_2yj"){
                    if(data['val_type']==5){
                        var json=$.parseJSON(data['val']);

                        if(data['image']!=0){
                            var len=data['image'].length,
                                tpl=json.length+"处损伤{%s%}",
                                list="",
                                i=0;

                            //输出照片
                            for(;i<len;i++){
                                //list+='<img src="'+data['image'][i]+'" />';
                            }
                            em.addClass("fcRed");
                            value=tpl.replace(/\{%s%\}/,list);
                        }else{
                            em.addClass("fcGreen");
                            value="无损伤";
                        }
                    }else{
                        em.addClass("fcGreen");
                        value=data['val'];
                    }

                }else if(action_id=="8yj"){
                    if(data['image']!="0"){
                        audio="<audio controls='controls'>"+
                                "<source src='"+data['image']+"' type='audio/mpeg'>"+
                            "</audio>";
                        em.replaceWith(audio);
                    }else{
                        em.addClass("fcGreen");
                        value="无";
                    }
                    
                }else if(action_id=="9yj"){

                    if(data['val']==0){
                        this.showSignature(data);
                    }else{
                        em.addClass("fcGreen");
                        value=data['val']==1?"完成":"跳过";
                    }
                    //html='<li id="J_actId9sg" class=""><i>&#xe61d;</i>客户确认签字<em></em></li>';

                }else if(action_id=="1sg"||action_id=="12_5sg"){
                    html="";
                    value="";
                }else if(action_id=="4_2sg"){
                    if(data['val']=="上面"){
                        this.detectionList=detectionList2;
                        html='<li id="J_actId4_3sg" class=""><i>&#xe61d;</i>拆机滤<em>进行中</em></li>';
                    }else{
                        html='<li id="J_actId4_4sg" class=""><i>&#xe61d;</i>举升车辆<em>进行中</em></li>';
                    }

                }else if(action_id=="4_4sg"&& typeof this.detectionList.over!="undefined"){
                    html="";

                    em.addClass("fcGreen");
                    value=data['val'];
                }else if(action_id=="12_3sg"){
                    
                    html="<li class='"+className+"'><a href='/mobile/myOrderInfoQBY.html?id="+data['order_id']+"'>服务结束 点击查看订单详情</a></li>";
                    html+="<li class='"+className+"'><i>&#xe61d;</i>施工检测<em class='fcBlue'>结束</em></li>";
                    em.addClass("fcGreen");
                    value=data['val'];
                    this.getOrderPrice();
                }else{
                    if(data['bad_level']==1){
                        em.addClass("fcGreen");
                        value=data['val'];
                    }else if(data['bad_level']==10){
                        em.addClass("fcRed");
                    }else if(data['bad_level']==5){
                        em.addClass("fcOrange");
                    }
                    value=data['val'];
                }

                //更改上一步值

                if(em!=null&&typeof li[0]!="undefined"){
                    em.html(value);
                }

                //插入下一步聚
                var nextKey=this.detectionList[action_id]['nextKey'],
                    nextLi=$("#J_actId"+nextKey);
                if(nextKey!=""){
                    html+="<li id='J_actId"+nextKey+"' class='"+className+"'><i>&#xe61d;</i>"+this.detectionList[nextKey]['name']+"<em>进行中</em></li>";
                }

                return html;
            },

            //输出价格相关条目
            printPriceItem:function(jyId,type){
                var _t=this;
                $.ajax({
                    type:"post",
                    dataType:"json",
                    url:"{:C('WEB_URL')}mobile/getOrderPeijian/",
                    data:{"order_id":_t.order_id,"jyId":jyId},
                    success:function(res){
                        if(res.status==1){
                            if(type=="init"){
                                $("#J_actId0_0_2yj").find("em").html("");
                                var html='<div class="jiyou" id="J_jiyouInfo"><img src="http://app2.haixiuyizhan.com/'+res['data']['logo']+'"><p class="name">'+res['data']['pj_name']+'</p><p class="price"><em class="J_price">￥'+res['data']['pj_csprice']+'</em><span>￥'+res['data']['pj_scprice']+'</span></p></div>';
                                $("#J_actId0_0_2yj").append(html).show();

                            }else{

                                var html='<li id="J_actId0_2yj" class=""><i></i>机油价格<em class="fcOrange">￥'+(res['data']['pj_csprice']*res['info'])+'</em><div class="jiyou" id="J_jiyouInfo"><img src="http://app2.haixiuyizhan.com/'+res['data']['logo']+'"><p class="count">×'+res['info']+'</p><p class="name">'+res['data']['pj_name']+' 1L</p><p class="price"><em class="J_price">￥'+res['data']['pj_csprice']+'</em><span>￥'+res['data']['pj_scprice']+'</span></p></div></li>',
                                price="￥"+res['data']['pj_csprice']*res.info;

                                $("#J_actId0_3yj").after(html);
                            }
                            
                            ;
                            $("#J_loadLog").remove();
                        }
                    }
                })
            },

            getOrderPrice:function(){
                var _t=this;
                $.ajax({
                    type:"post",
                    dataType:"json",
                    url:"{:C('WEB_URL')}mobile/getOrderPrice/",
                    data:{"order_id":_t.order_id},
                    success:function(res){
                        var data=res['data'];
                        if(res.status==1){
                            $("#J_price").children("em").html("￥"+data['all_price']);
                            $("#J_price").children("span").html("￥"+data['total_price']);
                            $(".pay").css("bottom",0);
                        }
                    }
                })
            },

            //显示签字模块
            showSignature:function(data){
                //记录操作日志ID
                $("#J_signature").val(data['log_id']);

                $("#signature").css("visibility","visible");
                var nowS=window.localStorage["signMin"];
                console.log(nowS>0||nowS==null||nowS==="NaN");
                if(!nowS>0||nowS==="NaN"){
                    window.localStorage["signMin"]=data['time']*1+80;
                }else if(nowS>0){
                    //填补调用时间差
                    //window.localStorage["signMin"]=nowS*1-2;
                }
                this.countDown($("#signature > h4 > span"));
            },

            //倒计时
            countDown:function (box) {
                var _t=this;
                min=(window.localStorage["signMin"])-(Date.parse(new Date())/1000);
                if (min <= 0) {

                    localStorage.removeItem("signMin");
                    $("#signature").css("visibility","hidden");
                } else {
                    box.html(min+"秒后进入下一流程");
                    //window.localStorage["signMin"]=min--;
                    setTimeout(function() {
                        _t.countDown(box);
                    },1000);
                }
            },
            //客户签字相关
            signature:function(){
                var canvasDiv = document.getElementById('canvasDiv');
                var canvas = document.createElement('canvas');
                var canvasWidth = $("body").width();
                var canvasHeight = 200;
                var point = {};
                
                point.notFirst = false;

                canvas.setAttribute('width', canvasWidth);
                canvas.setAttribute('height', canvasHeight);
                canvas.setAttribute('id', 'canvas');
                canvasDiv.appendChild(canvas);

                if (typeof G_vmlCanvasManager != 'undefined') {
                    canvas = G_vmlCanvasManager.initElement(canvas);
                }
                var context = canvas.getContext("2d");
                var toTop=document.getElementById("signature").offsetTop+37;
                
                canvas.addEventListener("touchstart", function(e) {
                    var mouseX = e.touches[0].pageX - this.offsetLeft;
                    var mouseY = e.touches[0].pageY - this.offsetTop;
                    paint = true;
                    addClick(e.touches[0].clientX - this.offsetLeft, e.touches[0].clientY -toTop);
                    redraw();
                });

                
                canvas.addEventListener("touchmove",function(e) {
                    if (paint) {
                        addClick(e.touches[0].clientX - this.offsetLeft, e.touches[0].clientY- toTop, true);
                        redraw();
                    }
                    e.preventDefault();
                });

                canvas.addEventListener("touchend", function(e) {
                    paint = false;
                });

                var clickX = new Array();
                var clickY = new Array();
                var clickDrag = new Array();
                var paint;

                function addClick(x, y, dragging) {
                    clickX.push(x);
                    clickY.push(y);
                    clickDrag.push(dragging);
                }

                function redraw() {
                    //canvas.width = canvas.width; // Clears the canvas
                    context.strokeStyle = "#df4b26";
                    context.lineJoin = "round";
                    context.lineWidth = 5;

                    while (clickX.length > 0) {
                        point.bx = point.x;
                        point.by = point.y;
                        point.x = clickX.pop();
                        point.y = clickY.pop();
                        point.drag = clickDrag.pop();
                        context.beginPath();
                        if (point.drag && point.notFirst) {
                            context.moveTo(point.bx, point.by);
                        } else {
                            point.notFirst = true;
                            context.moveTo(point.x - 1, point.y);
                        }
                        context.lineTo(point.x, point.y);
                        context.closePath();
                        context.stroke();
                    }

                }

                var clear = document.getElementById("J_clear");
                var submit = document.getElementById("J_submit");
                clear.addEventListener("click", function() {
                    canvas.width = canvas.width;
                });

                submit.addEventListener("click", function() {
                    $.ajax({
                        url:"{:C('WEB_URL')}mobile/signature/",
                        type:"post",
                        dataType:"json",
                        data:{"img":canvas.toDataURL("image/png"),"logId":$("#J_signature").val()},
                        success:function(res){
                            if(res.status==1){
                                $("#signature").remove();
                                window.localStorage["signMin"]=null;
                            }
                            showMsgTip(res.info);
                            return false;
                        }
                    })
                });
            }
        }
        live.init();

        
    </script>

</body>
</html>